<template>
  <div>
    <h2>双向绑定指令</h2>
    <!-- trim 去除空白 -->
    姓名：<input type="text" v-model.trim="form.uname"><br>
    <!--number 转换为数字  -->
    年龄：<input type="text" v-model.number="form.age"><br>
    <!-- lazy 失去焦点时 -->
    薪资：<input type="text" v-model.number.lazy="form.salary"><br>
    <button @click="onadd">确认添加</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form:{
        uname:'',
        age:'',
        salary:''
      }
    }
  },
  methods:{
    onadd () {
      console.log('您提交的数据是：',this.form);
    }
  }
}
</script>

<style>
  div {
    width: 300px;
    height: 300px;
    background-color: pink;
  }
</style>